<template>
<div class="wrap headerwrap">
    <!-- logo -->
    <div class="logo"><img src="../assets/img/indexLogo.6f8ac4f0.png" alt=""></div>
    <!-- 导航 -->
    <ul class="navs">
      <li  :class="{ active: $route.path == '/home' }"
      @click="$router.push('/home')">首页</li>
       <li
      @click="$router.push('/goods')"
      :class="{ active: $route.path == '/goods' }"
        >
      全部商品
      </li>
      <li
        @click="$router.push('/user')"
      :class="{ active: $route.path == '/user' }"
      > 个人中心
      </li>
      <li
        @click="$router.push('/order')"
      :class="{ active: $route.path == '/order' }"
      > 我的订单
      </li>
      <li
        @click="$router.push('/free')"
      :class="{ active: $route.path == '/free' }"
      >
      专属福利
      </li>
    </ul>
    <!-- 搜索 -->
    <div class="search">
      <!-- 获取用户输入的数据  v-model  -->
      <input type="text" v-model="searchVal">
      <span @click="searchFn">
        <img src="../assets/img/search.png" alt=""  >
      </span>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return{
      searchVal:''
    }
  },
  methods:{
    // 点击搜索按钮,跳转到全部商品页
    searchFn() {
      this.$router.push(`/goods?keyword=${this.searchVal}`)
    }
  }
}
</script>

<style lang='less' scoped>
.headerwrap {
  height: 118px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  .navs{
    display: flex;
    width: 500px;
    justify-content: space-between;
    li {
      cursor: pointer;
    }
    .active {
      color: #0a328e;
    }
  }
  .search {
      display: flex;
      input {
        width: 214px;
        height: 40px;
        border: 1px solid #DEDEDE;
        border-radius: 20px 0px 0px 20px;
        box-sizing: border-box;
        text-indent: 1em;
        outline: none;
      }
      span {
        width: 50px;
        height: 40px;
        line-height: 40px;
        background: #0A328E;
        border-radius: 0px 20px 20px 0px;  
        text-align: center;     
      }
    
  }

}
</style>